/********** @name: textarea组件 @describtion: props: title:字段别名,value:字段值 @author:liubingye @date:2023-02-10 10:29:07 ***********/
<template>
  <el-form-item :label="props.title" :prop="props.field">
    <div class="auto-grab">
      <el-select v-model="isAutoGrab" @change="handleChangeGrab" style="width: 106px">
        <el-option label="自动抓取" :value="1" />
        <el-option label="手动填写" :value="0" />
      </el-select>
      <p class="seo_tips">
        <el-popover placement="bottom" trigger="hover" content="将在发布后从正文段首自动抓取摘要。用于部分页面的效果展示，以及优化内容的SEO，以便在搜索引擎中更好被发现。">
          <template #reference>
            <el-icon color="#ee9f28"><QuestionFilled /></el-icon>
          </template>
        </el-popover>
      </p>
    </div>
    <el-input v-model="inputVal" v-show="!isAutoGrab" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" />
    <el-button @click="getSEOSummary" type="primary" text class="grab-text" v-show="!isAutoGrab && content">
      <el-icon><Magnet /></el-icon>
      抓取
    </el-button>
  </el-form-item>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { QuestionFilled, Magnet } from '@element-plus/icons-vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    default: ''
  },
  field: {
    type: String,
    default: ''
  },
  fieldsValue: {
    type: Object,
    default: () => {}
  },
  setting: {
    type: Object,
    default: () => {}
  },
  children: {
    type: Array,
    default: () => []
  },
  childrenShow: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['update:value'])
const inputVal = computed({
  get: () => props.value,
  set: val => {
    emits('update:value', val)
  }
})
const content = computed(() => {
  return props.fieldsValue[props.setting.grabfield]
})
watch(content, () => {
  if (content.value && isAutoGrab.value) {
    getSEOSummary()
  }
})
// 是否自动抓取
const isAutoGrab = ref(props.setting.is_auto_grab)
const handleChangeGrab = val => {
  if (!val) {
    inputVal.value = ''
  }else{
    getSEOSummary()
  }
}
//获取seo摘要
const getSEOSummary = async () => {
  const tempElement = document.createElement('div')
  tempElement.innerHTML = content.value
  const text = tempElement.textContent || tempElement.innerText
  inputVal.value = text.length > 500 ? text.substring(0, 500) + '...' : text
}
</script>

<style scoped lang="scss">
.el-form-item {
  align-items: center;
}
.seo_tips {
  font-size: 14px;
  color: #ee9f28;
  cursor: pointer;
  display: flex;
  align-items: center;
  i {
    font-size: 16px;
  }
}
.auto-grab {
  height: 32px;
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
  .el-radio + .el-radio {
    margin-left: 10px;
  }
}
.grab-text {
  padding: 0;
}
</style>
